<!DOCTYPE html>
<html>
<head>
<title>Fig. 8.4 Reproduction</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="400"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;
ctx.lineCap = 'round';

// --- Main Drawing Function ---
function drawDiagram() {
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // --- Define coordinates ---
    const q_x = 100;
    const q_y = 200;
    const q_point_x = q_x + 10;

    const det_A_x = 350;
    const det_A_y = 100;

    const det_B_x = 350;
    const det_B_y = 300;
    
    const line_half_height = 20;
    const rect_w = 30;
    const rect_h = 12;

    // --- Draw Point Source Q ---
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.textAlign = "center";
    ctx.fillText("Q", q_x, q_y + 8);

    ctx.beginPath();
    ctx.moveTo(q_point_x + 10, q_y - 8);
    ctx.lineTo(q_point_x, q_y);
    ctx.lineTo(q_point_x + 10, q_y + 8);
    ctx.stroke();

    // --- Draw Detector A ---
    const line_top_A = det_A_y - line_half_height;
    const line_bottom_A = det_A_y + line_half_height;

    ctx.beginPath();
    // Vertical line
    ctx.moveTo(det_A_x, line_bottom_A);
    ctx.lineTo(det_A_x, line_top_A);
    // Arrowhead
    ctx.moveTo(det_A_x - 6, line_top_A + 10);
    ctx.lineTo(det_A_x, line_top_A);
    ctx.lineTo(det_A_x + 6, line_top_A + 10);
    ctx.stroke();
    // Rectangle detector part
    ctx.strokeRect(det_A_x + 10, det_A_y - rect_h/2, rect_w, rect_h);
    
    // Label A
    ctx.font = "22px 'Times New Roman'";
    ctx.fillText("A", det_A_x, line_top_A - 10);

    // --- Draw Detector B ---
    const line_top_B = det_B_y - line_half_height;
    const line_bottom_B = det_B_y + line_half_height;

    ctx.beginPath();
    // Vertical line
    ctx.moveTo(det_B_x, line_bottom_B);
    ctx.lineTo(det_B_x, line_top_B);
    ctx.stroke();
    // Rectangle detector part
    ctx.strokeRect(det_B_x + 10, det_B_y - rect_h/2, rect_w, rect_h);
    
    // Label B
    ctx.font = "22px 'Times New Roman'";
    ctx.fillText("B", det_B_x, line_top_B - 10);

    // --- Draw Dashed Lines ---
    ctx.beginPath();
    ctx.setLineDash([7, 5]);
    // Line from Q to A
    ctx.moveTo(q_point_x, q_y);
    ctx.lineTo(det_A_x, det_A_y);
    // Line from Q to B
    ctx.moveTo(q_point_x, q_y);
    ctx.lineTo(det_B_x, det_B_y);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // --- Draw Labels on lines ---
    // Label l_A
    ctx.save();
    const mid_Ax = (q_point_x + det_A_x) / 2;
    const mid_Ay = (q_y + det_A_y) / 2;
    const angle_A = Math.atan2(det_A_y - q_y, det_A_x - q_point_x);
    ctx.translate(mid_Ax, mid_Ay);
    ctx.rotate(angle_A);
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText("l", 0, -8);
    ctx.font = "italic 14px 'Times New Roman'";
    ctx.fillText("A", 8, -3);
    ctx.restore();

    // Label l_B
    ctx.save();
    const mid_Bx = (q_point_x + det_B_x) / 2;
    const mid_By = (q_y + det_B_y) / 2;
    const angle_B = Math.atan2(det_B_y - q_y, det_B_x - q_point_x);
    ctx.translate(mid_Bx, mid_By);
    ctx.rotate(angle_B);
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText("l", 0, -8);
    ctx.font = "italic 14px 'Times New Roman'";
    ctx.fillText("B", 8, -3);
    ctx.restore();

    // --- Draw Caption ---
    ctx.font = "18px 'Times New Roman'";
    ctx.textAlign = "center";
    ctx.fillText("Fig. 8.4", canvas.width / 2, canvas.height - 20);
}

drawDiagram();

</script>

</body>
</html>